<template>

	<u-navbar title="" @rightClick="rightClick" bgColor="#ffffff00" :autoBack="true">

		<template #center>
			<view></view>
		</template>
		<template #left>
			<view class="xflex-x-center" style="background-color: #f6f4f3;border-radius: 50%;padding: 4rpx;"
				@click="navbar()">
				<u-icon name="arrow-left" color="#606266" size="22"></u-icon>
			</view>
		</template>
	</u-navbar>

	<view class="u-demo-block" v-if="lbShow == 1">
		<u-swiper :list="swiperData.list" @click="swiperclick" @change="(e) => (swiperData.currentNum = e.current)"
			:autoplay="true" height="375">
			<view slot="indicator" class="indicator-num">
				<text class="indicator-num__text">{{ swiperData.currentNum + 1 }}/{{ swiperData.list.length }}</text>
			</view>
		</u-swiper>
	</view>

	<view class="xbgf xp26-30 xbs">
		<view class="xfz28 xc0 xpb40" v-if="spmcShow == 1">{{ goods.info.name }}</view>
		<view class="xflex-x">
			<!-- <view class="goodsLeft xflex1 xflex-x xfz24 xfw500 xc9 xpb24">
				<view class="specification xflex1 xflex-x xai"></view>
				<view class="specification_val"></view>
			</view> -->
			<view class="goodsLeft xflex1">
				<view class="specification xflex-x xfz24 xfw500 xc9 xpb24 xai">

					<view class="" v-if="ggShow">规格:{{ goods.info.spec_name }}</view>

				</view>
				<view class="specification xflex-x xfz24 xfw500 xc9 xpb24 xai">

					<view class="" v-if="kcShow == 1">库存:{{ goods.info.stock }}{{ goods.info.unit }}</view>

				</view>
				<view class="specification xflex-x xfz24 xfw500 xc9 xpb24 xai" v-if="bhShow ==1">
					<view class="specification_lab">产品编号:</view>
					<view class="specification_val">{{ goods.info.sn }}</view>
				</view>
				<view class="specification xflex-x xfz24 xfw500 xc9 xpb24 xai" v-if="gyShow == 1">
					<view class="specification_lab">产品工艺:</view>
					<view class="specification_val">{{ goods.info.technology_name }}</view>
				</view>
				<view class="specification xflex-x xfz24 xfw500 xc9 xpb24 xai" v-if="cplbShow == 1">
					<view class="specification_lab">产品类别:</view>
					<view class="specification_val">{{ goods.info.classification_name }}</view>
				</view>
				<view class="specification xflex-x xfz24 xfw500 xc9 xpb24 xai" v-if="pfShow == 1">

					<view class="">平方:{{ goods.info.square }}㎡</view>
				</view>
				<view class="specification xflex-x xfz24 xfw500 xc9 xpb24 xai" v-if="zlShow == 1">

					<view>重量:{{ goods.info.weight }}kg</view>
				</view>
				<view class="specification xflex-x xfz24 xfw500 xc9 xpb24 xai" v-if="lfShow ==1">
					<view>立方:{{ goods.info.cube }}m³</view>
				</view>
				<view class="specification xflex-x xfz24 xfw500 xc9 xpb24 xai" v-for="(item,index) in goods.info.json"
					:key="index">
					<view>{{item.name}}:{{ item.value }}{{item.unit}}</view>
				</view>
			</view>

		</view>
		<strong></strong>
		<strong></strong>
		<view>
			<view class="xflex-x">
				<view class="xflex1 xfz26 xfw500 xc3" v-if="tpbmShow == 1">
					图片编码：
					<text class="xfz28 xfw500 color1">{{ goods.info.goods_price }}</text>
				</view>
				<view class="xflex1 xfz26 xfw500 xc3" v-if="zcfDShow == 1">
					桩数：
					<text class="xfz28 xfw500 color1">{{ goods.info.car_price }}</text>
				</view>
			</view>
		</view>


	</view>

	<view class="" v-if="goods.info.file" @click="topage('/pages/index/voide?url='+goods.info.file)">
		<video :show-center-play-btn="false" :controls="false" :show-loading="false" :show-play-btn="false"
			:show-fullscreen-btn="false" :enable-progress-gesture="false" :src="goods.info.file"
			style="width: 750rpx;"></video>
	</view>

	<view class="xbgf">
		<view class="">
			<u-tabs :list="list1" @click="click" :current="current" :scrollable="false" lineWidth="50"
				lineColor="#3F7233" lineHeight="6"></u-tabs>
		</view>
		<view class="content" v-if="list1.length > 0">
			<u-parse :content="content"></u-parse>
		</view>
	</view>

	<view class="xflex-x select" v-if="ordershow">
		<view class="select_box" :class="order.type ==1?'active':''" @click="onActive(1)">订单列表1</view>
		<view class="select_box" :class="order.type ==2?'active':''" @click="onActive(2)">订单列表2</view>
		<view class="select_box" :class="order.type ==3?'active':''" @click="onActive(3)">订单列表3</view>
	</view>
	<view class="xbgf xmt24" v-if="ordershow" v-for="(item,index) in order.list" :key="index">
		<view class="goods xflex-x">
			<image class="goods_select" @click.stop="getCartSelected(item.id,item.selected,index)"
				v-if="item.selected == 0" src="/static/image/weigouxuan.png" mode=""></image>
			<image class="goods_select" @click.stop="getCartSelected(item.id,item.selected,index)"
				v-if="item.selected == 1" src="/static/image/gouxuan.png" mode=""></image>
			<view class="xflex-x xflex1">
				<image class="goods_img" :src="item.goods.image" mode=""></image>
				<view class="goods_info xflex-y-between xai xflex1">
					<view class="">
						<view class="xflex-x-between xfz28 xfw500 xc0">
							<view class="">{{item.goods.classification_name}}</view>
							<image class="goods_del" src="/static/image/del.png" @click="getcartDel(item.id)" mode="">
							</image>
						</view>
						<view class="xfz24 xfw500 xc9">编号：{{item.goods.sn}}</view>
					</view>
					<view class="xflex-x">
						<view class="xflex1 xfz26 xfw500 xc3" v-if="priceShow">
							商品价格：
							<text class="xfz28 xfw500 color1">￥ {{item.goods.goods_price}}</text>
						</view>
						<view class="xflex1 xfz26 xfw500 xc3" v-if="!priceShow">

						</view>
						<view class="xflex-x" @click=" order.list[index].show = !item.show">
							<view class="xfz24 xfw400 xc9">{{item.show?'收起':'展开'}}</view>
							<image class="goods_jt" src="/static/image/zhankai.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-if="item.show">
			<view class="xflex-x-between goods_set xbs">
				<view class="">总数量</view>
				<view class="xflex-x">
					<image class="goods_js" src="/static/image/jian.png" mode=""
						@click="getcartChange(item.id,item.goods_num-1,index)">
					</image>
					<view class="goods_num">{{item.goods_num}}</view>
					<image class="goods_js" src="/static/image/jia.png" mode=""
						@click="getcartChange(item.id,item.goods_num+1,index)"></image>
				</view>
			</view>
			<view class="xflex-x-between goods_set xbs">
				<view class="">A面</view>
				<view class="xflex-x">
					<image class="goods_js" src="/static/image/jian.png" mode="" @click="getcartFace(item,'1',0,index)">
					</image>
					<view class="goods_num">{{item.value_1}}</view>
					<image class="goods_js" src="/static/image/jia.png" mode="" @click="getcartFace(item,'1',1,index)">
					</image>
				</view>
			</view>
			<view class="xflex-x-between goods_set xbs">
				<view class="">B面</view>
				<view class="xflex-x">
					<image class="goods_js" src="/static/image/jian.png" mode="" @click="getcartFace(item,'2',0,index)">
					</image>
					<view class="goods_num">{{item.value_2}}</view>
					<image class="goods_js" src="/static/image/jia.png" mode="" @click="getcartFace(item,'2',1,index)">
					</image>
				</view>
			</view>
			<view class="xflex-x-between goods_set xbs">
				<view class="">C面</view>
				<view class="xflex-x">
					<image class="goods_js" src="/static/image/jian.png" mode="" @click="getcartFace(item,'3',0,index)">
					</image>
					<view class="goods_num">{{item.value_3}}</view>
					<image class="goods_js" src="/static/image/jia.png" mode="" @click="getcartFace(item,'3',1,index)">
					</image>
				</view>
			</view>
			<view class="xflex-x-between goods_set xbs">
				<view class="">D面</view>
				<view class="xflex-x">
					<image class="goods_js" src="/static/image/jian.png" mode="" @click="getcartFace(item,'4',0,index)">
					</image>
					<view class="goods_num">{{item.value_4}}</view>
					<image class="goods_js" src="/static/image/jia.png" mode="" @click="getcartFace(item,'4',1,index)">
					</image>
				</view>
			</view>
		</view>
	</view>

	<view class="btn" v-if="ordershow == 1" @click="topage('/pages/mine/order/goods?type='+ order.type)">已选({{sum}}）生成订单
	</view>

	<view class="" style="height: 300rpx;">

	</view>

	<view class="xbottom xflex-x-between" v-if="ordershow == 1">
		<view class="xflex-y" @click="topage('/pages/mine/order/goods?type='+ order.type)">
			<image class="icon" src="/static/image/icon_ysdd.png" mode=""></image>
			<view class="icon_text">
				已生成订单
			</view>
		</view>
		<view class="xflex-x">
			<view class="iBten" @click="getCartAdd(1)">
				添加订单列表1
			</view>
			<view class="iBten xml20" @click="getCartAdd(2)">
				添加订单列表2
			</view>
			<view class="iBten xml20" @click="getCartAdd(3)">
				添加订单列表3
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		// 分享到微信好友功能
		onShareAppMessage(res) {
			console.log(res, "onShareAppMessage");
			return {
				title: '岩搜搜',
				path: '/pages/index/detail/detail?id=' + uni.getStorageSync('goodsId') + "&data=" + JSON.stringify(uni.getStorageSync('types')) + '&utype=' +
					uni.getStorageSync("identity_id") + '&mobile=' + uni.getStorageSync("mobile") +
					'&pid=' + uni.getStorageSync("user")?.userinfo?.id,
				desc: this.share.desc || '',
				imageUrl: this.share.imageUrl,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})

					console.log(this.share.path, "分享瑞金");
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
					console.log(this.share.path, "分享失败");
				}
			}
		},
		// 分享到朋友圈功能
		onShareTimeline(res) {
			return {
				title: this.share.title,
				path: '/pages/index/detail/detail?id=' + uni.getStorageSync('goodsId') + "&data=" + JSON.stringify(uni.getStorageSync('types')) + '&utype=' +
					uni.getStorageSync("identity_id") + '&mobile=' + uni.getStorageSync("mobile") +
					'&pid=' + uni.getStorageSync("user")?.userinfo?.id,
				desc: this.share.desc || '',
				imageUrl: this.share.imageUrl,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
					console.log(this.share.path, "分享瑞金");
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
					console.log(this.share.path, "分享失败");
				}
			}
		},

	}
</script>
<script setup>
	import {
		ref,
		reactive,
		watch,
		computed
	} from 'vue';
	import {
		onReachBottom,
		onShow,
		onLoad,
		onPageScroll,

	} from '@dcloudio/uni-app';
	import {
		getGoodsDetail,
		cartLists,
		cartAdd,
		cartChange,
		cartFace,
		cartDel,
		accesslists,
		site,
		cartSelected
	} from '@/network/home.js';
	import {
		topage,
		previewImage
	} from "@/utils/common.js"

	import {
		useCounterStore
	} from '@/Store/index'
	const counter = useCounterStore()
	let swiperData = reactive({
		list: [],
		current: 0,
		currentNum: 0
	});

	const shareData = computed(() => { // 分享的数据
		try {
			const value = uni.getStorageSync('types');

			return {
				title: '',
				desc: '',
				path: 'pages/index/detail/detail?id=' + goods.id + "&data=" + JSON.stringify(value) + '&utype=' +
					uni.getStorageSync("identity_id") + '&pid=' + uni.getStorageSync("user").userinfo.id +
					'&mobile=' + uni.getStorageSync("mobile"),
				imageUrl: '',
			}
		} catch (e) {
			// error
		}

	})

	// 价格是否显示
	let priceShow = ref(0)
	let spmcShow = ref(0)
	let ggShow = ref(0)
	let kcShow = ref(0)
	let bhShow = ref(0)
	let gyShow = ref(0)
	let cplbShow = ref(0)

	let pfShow = ref(0)
	let zlShow = ref(0)

	let tpbmShow = ref(0)
	let zcfDShow = ref(0)
	let lfShow = ref(0)

	const getqx = () => {

		accesslists().then(res => {
			// console.log(res.data ==1,"====")
			lbShow.value = res.data.goodsinfo_slide;
			priceShow.value = res.data.goodsinfo_slide
			spmcShow.value = res.data.goodsinfo_goodsname
			ggShow.value = res.data.goodsinfo_spec

			kcShow.value = res.data.goodsinfo_stock

			bhShow.value = res.data.goodsinfo_sn
			gyShow.value = res.data.goodsinfo_technology
			cplbShow.value = res.data.goodsinfo_classification
			pfShow.value = res.data.goodsinfo_square
			zlShow.value = res.data.goodsinfo_weight
			lfShow.value = res.data.goodsinfo_cube
			tpbmShow.value = res.data.goodsinfo_price
			zcfDShow.value = res.data.goodsinfo_zcfee


			if (res.data.goodsinfo_other == 1) {
				list1.value.push({
					name: '其他详情',
					type: 0
				})
			}
			if (res.data.goodsinfo_package == 1) {
				list1.value.push({
					name: '包装方案',
					type: 1
				})
			}
			if (res.data.goodsinfo_plan == 1) {
				list1.value.push({
					name: '其他方案',
					type: 2
				})
			}
			if (res.data.goodsinfo_install == 1) {
				list1.value.push({
					name: '安装方案',
					type: 3
				})
			}

			if (list1.value.length > 0) {
				click({
					...list1.value[0],
					index: 0
				})
			}

			ordershow.value = res.data.goodsinfo_order

			console.log(ordershow.value, res.data.goodsinfo_order, "=====0-");
		})


	}
	let lbShow = ref(0)

	const getaccesslists = () => {
		accesslists().then(res => {
			console.log(res);
			lbShow.value = res.data.goodsinfo_slide
		})
	}


	const onselect = (index) => {

	}


	let current = ref(0);
	let list1 = ref([
		// {
		// 	name: '其他详情',
		// 	type: 0
		// },
		// {
		// 	name: '包装方案',
		// 	type: 1
		// },
		// {
		// 	name: '其他方案',
		// 	type:2
		// },
		// {
		// 	name: '安装方案',
		// 	type:3
		// }
	]);
	const click = (e) => {

		console.log(e, '==========');
		current.value = e.index;
		if (e.type == 0) {
			content.value = goods.info.goods_remark;
		} else if (e.type == 1) {
			content.value = goods.info.package_scheme;
		} else if (e.type == 2) {
			content.value = goods.info.shipping_scheme;
		} else if (e.type == 3) {
			content.value = goods.info.install_scheme;
		}
	};

	let content = ref("");

	const navbar = () => {
		// uni.$on('update', function(data) {
		// 	console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
		// })
		let canNavBack = getCurrentPages()
		console.log(canNavBack.length > 1);
		if (canNavBack.length == 1) {
			setTimeout(() => {
				console.log("返回参数", gettype.value);
				uni.$emit("update", gettype.value)
			}, 200)
		}
		uni.switchTab({
			url: "/pages/index/index"
		})

	}

	let goods = reactive({
		id: '9607',
		info: {
			file: ''
		}
	})
	const goodsDetail = () => {
		getGoodsDetail({
			id: goods.id,
			method: 'mnp'
		}).then((res) => {
			console.log(res);
			swiperData.list = res.data.other_images;
			// content.value = res.data.goods_remark
			goods.info = res.data;
		});
	};


	// 订单
	const order = reactive({
		list: [],
		page: 1,
		type: 1
	})
	const getCart = () => {
		console.log("111111");
		cartLists({
			page_no: order.page,
			page_size: 10,
			type: order.type,
			method: 'mnp'
		}).then(res => {
			console.log(res);
			// res.data.lists.map(item => {
			// 	item.show = false
			// 	item.select = false
			// })
			order.list = res.data.lists
		})
	}

	let sum = ref(0)
	watch(() => order.list, (newValue, oldValue) => {
		console.log('watch 已触发', newValue)
		sum.value = 0
		newValue.forEach(item => {
			if (item.selected == 1) {
				sum.value++
			}
		})
	}, {
		deep: true
	})

	const onActive = (e) => {
		order.type = e
		// console.log();
		getCart()
	}

	const getCartAdd = (type) => {
		cartAdd({
			goods_id: goods.id,
			goods_num: 1,
			type: type
		}).then(res => {
			uni.showToast({
				title: "添加成功"
			})

		})
	}

	const swiperclick = (e) => {

		previewImage(swiperData.list, e)
	}

	// 添加
	const getcartChange = (id, num, k) => {
		if (num == 0) return
		order.list[k].goods_num = num
		let data = {
			cart_id: id,
			goods_num: num
		}
		cartChange(data).then(res => {
			uni.showToast({
				title: "添加成功"
			})

		})
	}
	// 修改面数量

	let addTYpe = ref(false)
	// @click="getcartFace(item,'1',0,index)"
	const getcartFace = (item, name, type, k) => {
		console.log(item, name, type, k);
		console.log(order.list[k][`value_${name}`]);
		let num = order.list[k][`value_${name}`]
		let id = order.list[k].id
		let a = 0
		if (type == 1) {
			a = num + 1
		} else {
			a = num - 1
		}

		if (a < 0) return
		if (addTYpe.value) return

		addTYpe.value = true
		order.list[k][`value_${name}`] = a
		cartFace({
			cart_id: id,
			goods_num: a,
			type: name
		}).then(res => {
			addTYpe.value = false
			// uni.showToast({
			// 	title: "添加成功"
			// })
			// getCart()
		})
	}



	// 删除
	const getcartDel = (id) => {
		cartDel({
			cart_id: id
		}).then(res => {
			getCart()
		})
	}

	// 修改订单数量
	const getcareAdd = (id, num) => {
		cartAdd({
			cart_id: id,
			goods_num: num
		}).then(res => {
			uni.showToast({
				title: "",
				icon: 'success'
			})

		})
	}

	// 修改选中状态
	const getCartSelected = (id, selected, index) => {
		cartSelected({
			cart_id: id,
			selected: selected == 1 ? 0 : 1,
			type: 0
		}).then(res => {
			order.list[index].selected = selected == 1 ? 0 : 1
		})
	}
	let ordershow = ref(0)
	// site().then(res => {
	// 	console.log(res);
	// 	if (res.data.order_list == 1) {
	// 		ordershow.value = true
	// 	}

	// })
	let registerShow = ref(false)

	site({
		name: "is_open_reg"
	}).then(res => {
		console.log(res);
		if (res.data.goods_nav == 1) {
			registerShow.value = true
		}
	})

	let gettype = ref('')
	onShow(() => {

		setTimeout(() => {
			uni.$mpShare = shareData.value
			console.log(shareData.value);
			console.log("====pp");
		}, 1000)
	})
	onLoad((option) => {
		// console.log(!decodeURIComponent(option.q).split('id=')[0]);
		if (decodeURIComponent(option.q).split('id=')[1]) {
			goods.id = decodeURIComponent(option.q).split('id=')[1]
			console.log(option);
		} else {
			if (option.id) {
				goods.id = option.id;
				uni.setStorageSync('goodsId', option.id)
			} else {
				goods.id = uni.getStorageInfoSync('goodsId')
			}

			console.log(option, "是否");
			if (option.data) {
				gettype.value = JSON.parse(option.data)
				console.log(gettype.value, "是否");
				counter.setinfo(option.data)
			} else {

			}

		}
		getqx()

		goodsDetail();
		getCart()


	});
</script>

<style lang="scss">
	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #ffffff;
			font-size: 12px;
		}
	}

	.specification {
		width: 100%;
		text-align: start;

		&_lab {
			width: 110rpx;
		}

		&_val {
			flex: 1;
		}
	}

	.color1 {
		color: #f64d24;
	}

	.content {
		padding: 27rpx 66rpx 23rpx 36rpx;
	}

	.select {
		padding: 54rpx 30rpx 13rpx;

		&_box {
			width: 180rpx;
			height: 72rpx;
			background: #cccccc;
			border-radius: 10rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
			line-height: 72rpx;
			text-align: center;
			margin-right: 20rpx;
		}

		.active {
			background: #3f7233;
		}
	}

	.goods {
		padding: 20rpx 21rpx 10rpx 15rpx;

		&_select {
			width: 32rpx;
			height: 32rpx;
			margin-right: 19rpx;
		}

		&_img {
			width: 103rpx;
			height: 180rpx;
			background-color: #3f7233;
			margin-right: 21rpx;
		}

		&_del {
			width: 28rpx;
			height: 28rpx;
		}

		&_info {
			height: 180rpx;
		}

		&_jt {
			width: 18rpx;
			height: 12rpx;
			margin-left: 12rpx;
		}

		&_js {
			width: 40rpx;
			height: 40rpx;
		}

		&_num {
			width: 90rpx;
			height: 40rpx;
			background: #f8f8f8;
			text-align: center;
			line-height: 40rpx;
			margin: 0 5rpx;
		}

		&_set {
			padding: 14rpx 20rpx 14rpx 67rpx;
		}

		.active {
			transform: rotate(180deg);
		}
	}

	.btn {
		width: 690rpx;
		height: 88rpx;
		background: #3f7233;
		border-radius: 10rpx;

		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		line-height: 88rpx;
		text-align: center;
		margin: auto;
		margin-top: 20rpx;
	}

	.icon {
		width: 38rpx;
		height: 38rpx;

		&_text {
			font-size: 18rpx;
			font-weight: 500;
			color: #333333;
		}
	}

	.iBten {
		width: 180rpx;
		height: 72rpx;
		background: #3F7233;
		border-radius: 10rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 72rpx;
	}

	.goodsLeft {
		display: grid;
		grid-template-columns: 1fr 1fr;
		justify-content: space-between;
	}
</style>